<template>
  <el-dialog
    :destroy-close="true"
    :visible.sync="visable"
    append-to-body
    lock-scroll
    modal
    modal-append-to-body
    show-close
    title="问卷回答详情"
    width="60vw"
    @close="close"
  >
    <div class="questionnaire-detail-container">
      <!--      <ul v-for="(group,key) in surveyGroup" :key="'group-'+key">-->
      <!--        <h2>{{ surveyTypeMapping[key] }}</h2>-->
      <!--        <li v-for="(question,idx) in group" :key="question.id">-->
      <!--          <h3>{{ idx+1 }}、{{ question.surveyTitle }}</h3>-->

      <!--          <p>回答: xxxxxxxxx</p>-->
      <!--          <p>选择: dddddddddd</p>-->
      <!--        </li>-->
      <!--      </ul>-->

      <ul v-if="isH5Suvery">
        <li v-for="(item, index) in answers" :key="'answer-item-' + index">
          <h3>{{ item.questionInfo }}</h3>

          <!--          <p v-if="item.chose && item.chose.length > 0">-->
          <!--            已选择：{{ item.chose }}-->
          <!--          </p>-->
          <p v-if="item.answer && item.answer.length > 0">
            回答： {{ item.answer }}
          </p>

          <div v-if="item.practiceInfo && item.practiceInfo.length > 0">
            <div
              v-for="(childItem, childIdx) in item.practiceInfo"
              :key="'child-answer-item-' + childIdx"
            >
              <h3>{{ childItem.questionInfo }}</h3>
              <p>回答: {{ childItem.answer }}</p>
            </div>
          </div>
        </li>
      </ul>
      <ul v-else>
        <li v-for="(item, index) in answers" :key="'answer-item-' + index">
          <h3>{{ item.surveyTitle }}</h3>

          <p v-if="item.chose && item.chose.length > 0">
            已选择：{{ item.chose }}
          </p>
          <p v-if="item.answer && item.answer.length > 0">
            回答： {{ item.answer }}
          </p>
        </li>
      </ul>
    </div>
  </el-dialog>
</template>

<script>
import {
  GetSurveyAnswerList,
  GetSurveyList,
  GetH5Detail
} from '@/api/api'
import { QuestionnaireSurveyTypes } from '@/utils/common'

export default {
  name: 'QuestionnaireDetailDialog',
  data() {
    return {
      surveyTypeMapping: QuestionnaireSurveyTypes,
      visable: false,
      answers: [],
      h5Id: '',
      surveyTypes: [],
      userId: '',
      loading: false,
      questions: [],
      surveyGroup: []
    }
  },

  computed: {
    isH5Suvery() {
      return this.surveyTypes.includes('H5')
    }
  },

  mounted() {},
  methods: {
    async reload() {
      if (this.isH5Suvery) {
        this.reloadH5()
        return
      }
      // await this.loadSurveyQuestions()
      if (this.loading) {
        return
      }
      this.loading = true
      for (let i = 0; i < this.surveyTypes.length; i++) {
        const type = this.surveyTypes[i]
        await this.loadSurveyAnswers(type)
      }
      this.loading = false

      // await this.loadSurveyAnswers()
    },

    async reloadH5() {
      console.log('this.loading', this.loading, this.h5Id)
      if (this.loading) {
        return
      }
      this.loading = true
      try {
        const { data } = await GetH5Detail(this.h5Id)
        console.log('H5 detail', data)
        if (!data || !data.data) {
          return
        }
        console.log(data.data)
        const { pracH5Info } = data.data
        if (!pracH5Info) {
          return
        }

        const answers = JSON.parse(pracH5Info)
        console.log('answers', answers)
        this.answers = answers

        // await this.loadH5QuestionList()
      } catch (e) {
        console.error('error getting detail ', e)
      } finally {
        this.loading = false
      }
    },

    async loadSurveyAnswers(type) {
      try {
        const { data } = await GetSurveyAnswerList({
          userID: this.userId,
          surveyType: type // this.surveyTypes[0]
        })
        console.log('==== GetSurveyAnswerList', data)

        const { rows, msg, code } = data
        if (code !== 200) {
          this.$message.error(msg)
          return
        }
        this.answers = this.answers.concat(rows)
      } catch (e) {
        console.error(e.message)
      }
    },
    // async loadH5QuestionList() {
    //   try {
    //     const response = await fetch('http://123.56.236.117:9000/h5/psycAsseQuestion/allList')
    //     console.log('H5 questions', response)
    //   } catch (e) {
    //
    //   }
    // },
    async loadSurveyQuestions() {
      try {
        if (this.loading) {
          return
        }
        this.loading = true

        const { data } = await GetSurveyList()
        console.log('==== get survey questions', data)

        const questions = data.data.filter((item) => {
          // filter by current user surveyType;
          return this.surveyTypes.includes(item.surveyType)
        })
        const groups = {}
        questions.forEach((item) => {
          const { surveyType } = item
          if (!groups[surveyType]) {
            groups[surveyType] = []
          }
          groups[surveyType] ? groups[surveyType].push(item) : undefined
        })
        console.log('groups', groups)
        this.surveyGroup = groups

        this.loading = false
      } catch (e) {
        this.loading = false
        console.error(e.message)
      }
    },
    close() {
      this.visable = false
      this.$emit('close')
    }
  }
}
</script>

<style lang="scss" scoped>
.questionnaire-detail-container {
  ul {
    li {
      display: block;
      padding: 8px 0;
      list-style: none;
    }
  }
}
</style>
